<template>
    <div class="container">
      <div class="header flex-yc flex-xbt">
        <h2>订单中心</h2>
      </div>
      <div style="margin-top: 20px">
        <el-tabs v-model="activeName"  @tab-click="handleTabClick" class="tabls">
                <el-tab-pane label="所有订单" name="first">
                  <div class="table">
                      <div class="both-handler-wrap flex-yc">
                      </div>
                      <div class="table-wrap">
                        <div class="order-item-wrap" v-for="item in 2" :key="item">
                          <div class="order-wrap-info flex-yc flex-xbt">
                            <div class="order-date-no flex-yc">
                              <span class="el-icon--right">2020.03.03 12:00:00</span>
                              <span class="order-no flex-yc">
                                订单编号：12321321221213141
                                <el-icon class="el-icon--right"><copy-document /></el-icon>
                              </span>
                              <span class="totalamot">总计 ¥ 12211.00</span>
                            </div>
                            <p>
                              <span class="status infostatus">已经付款</span>
                              <span class="infoLink" @click="router.push('/mall/goods/order-detail')">订单详情</span>
                            </p>
                          </div>

                          <div class="order-con flex">
                            <div class="order-item-wrap">
                              <order-table></order-table>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                <div class="pagination flex-xyc">
                  <el-pagination background layout="prev, pager, next" :total="50" />
                </div>
                </el-tab-pane>
                <el-tab-pane label="待付款" name="second">待付款</el-tab-pane>
                <el-tab-pane label="待发货" name="third">待发货</el-tab-pane>
                <el-tab-pane label="待收货" name="fourth">待收货</el-tab-pane>
                <el-tab-pane label="已发货"  name="fouxrth2" >已发货</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue'
  const activeName=ref('first')
  import comment from '@/pages/member/views/mall/components/comment.vue'
  import OrderTable from '@/pages/mall/components/OrderTableCom.vue'
  import {  useRouter } from 'vue-router';
  const router = useRouter()
  const searchKeyword = ref<string>('')
  const addTopic = ref<boolean>(false)

  const onInputChange = (val: string) => {
    searchKeyword.value = val
  }
  
  const shopform=reactive({
    shopname:""
  })
  const handleTabClick=(name)=>{
    console.log(name)
  }
  const editShop=()=>{

  }
  onMounted(() => {
    
  })
  
  const golink = (id:string) => {
    router.push({ path: '/member/mall/shopedit', query: { id } })
  };


  
  const onAddSpread = (val: boolean) => {
    return new Promise((resolve, reject) => {
      reject()
    })
  }
  

  const onAddTopic = () => {
    addTopic.value = true
  }
  </script>
  
  <style scoped lang="scss">
  .tabls{
       :deep{
        .el-tabs__item{
            padding: 20px 25px;
            font-size: 16px;
            color: #8691A3;
            cursor: pointer;
        }
        .is-active{
          color:#3AACE3
        }
       } 
  }
  .container {
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
  
    .header {
      font-size: 20px;
      color: #021429;
      font-weight: bold;
    }
  }
  .order-theader {
      margin: 32px 0 20px;
      background-color: #f7f7f7;

      span {
        width: 180px;
        padding: 10px 16px;
        text-align: center;

        &:nth-child(1) {
          text-align: left;
        }

        &.td1 {
          width: 516px;
        }
      }
    }

    .both-handler-wrap {
      font-size: 14px;

      .both {
        margin-right: 10px;
      }
    }
    .totalamot{
      color: #E47470;
      font-weight: 600;
    }
    .table-wrap {
      .order-item-wrap {
        .order-wrap-info {
          padding: 16px 16px;
          margin-top: 14px;
          font-size: 14px;
          color: #040724;
          background-color: #f7f7f7;

          .order-date-no {
            .order-no {
              margin: 0 25px 0 16px;

              .el-icon--right {
                color: $primary;
              }
            }
          }

          .status {
            color: $primary;
          }
          .infostatus{
            padding-right: 20px;
          }
          .infoLink{
            cursor: pointer;
            color: #0085FF;
          }
        }

        .order-con {
          border: 1px solid $borderCol;

          .order-item-wrap {
          }

          .order-item-status {
            flex: 1;
            font-size: 16px;
            color: #021429;

            span {
              cursor: pointer;

              &.active,
              &:hover {
                color: $primary;
              }

              & + span {
                margin-top: 16px;
              }
            }
          }
        }
      }
    }
  </style>
  